<template>
  <div class="tabBox">
    <el-tag
      class="mr10"
      v-for="tag in tagsList"
      :key="tag.path"
      :closable="tag.path !== '/'"
      size="mini"
      :effect="$route.path === tag.path ? 'dark' : 'plain'"
      @click="selectTag(tag)"
      @close="closeTag(tag)"
    >
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapGetters(['tagsList']),
  },
  created() {
    console.log(this.$route)
  },
  methods: {
    //   点击时候
    selectTag(tag) {
      //跳转页面,并选中
      this.$router.push({ path: tag.path })
      this.$store.commit('asideMeum/selectMeum', tag)
    },
    ...mapMutations({
      close: 'asideMeum/closeTag',
    }),
    closeTag(tag) {
      this.close(tag)
    },
  },
}
</script>

<style lang="scss" scoped>
.tabBox {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
}
/deep/ .el-tag {
  font-size: 14px;
}
</style>
